import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
import axios from "axios"

export const fetchHomeMultiDataAction = createAsyncThunk(
    "fetch/homemultidata",
    async (extraInfo, { dispatch, getState }) => {
        const res = await axios.get("http://123.207.32.32:8000/home/multidata")
        const banners = res.data.data.banner.list
        const recommends = res.data.data.recommend.list
        dispatch(changeBanners(banners))
        dispatch(changeRecommends(recommends))
        return res.data
    }
)

const homeSlice = createSlice({
    name: "home",
    initialState: {
        banners: [],
        recommends: [],
    },
    reducers: {
        changeBanners(state, { payload }) {
            state.banners = payload
        },
        changeRecommends(state, { payload }) {
            state.recommends = payload
        },
    },
    // extraReducers: {
    //     // [fetchHomeMultiDataAction.pending](state, action) {
    //     //     console.log("fetchHomeMultidataAction pending")
    //     // },
    //     [fetchHomeMultiDataAction.fulfilled](state, { payload }) {
    //         state.banners = payload.data.banner.list
    //         state.recommends = payload.data.recommend.list
    //         console.log("fetchHomeMultidataAction fulfilled")
    //     },
    //     // [fetchHomeMultiDataAction.rejected](state, action) {
    //     // console.log("fetchHomeMultidataAction rejected")
    //     // },
    // },
    extraReducers: (builder) => {
        // builder
        //     .addCase(fetchHomeMultiDataAction.pending, (state, action) => {
        //         console.log("pending")
        //     })
        //     .addCase(fetchHomeMultiDataAction.fulfilled, (state, { payload }) => {
        //         state.banners = payload.data.banner.list
        //         state.recommends = payload.data.recommend.list
        //     })
    },
})

export const { changeBanners, changeRecommends } = homeSlice.actions
export default homeSlice.reducer
